<template>
	<view>
		<u-grid :border="false" col="3" >
		    <u-grid-item v-for="(item,inx) in list" :key="inx"   :bgColor="item.isCheck ? '#dd6161' : '#f4f3f2'" :customStyle="{width:'31%',marginRight:'2%',borderRadius:'10rpx',padding:'20rpx',marginTop:'10rpx',color:(item.isCheck ?'#FFFFFF' :'#000000')}" @click="checkGrid(item)">
				<view>
					<text>{{item.title}}</text>
				</view>
		    </u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import toPinyin from '@/utils/toPinyin.js'
	import {initFuc,branchAnalysis} from '@/utils/lottery/lhc.js'
	export default {
		name:'lhc-two-sides',
		props:{
			ball:{
				type:Array,
				default: () => {
				    return []
				}
				
			},
			zodiac:{
				type:Array,
				default: () => {
				    return []
				}
				
			},
			config:{
				type:Object,
				default: () => {
				    return {}
				}
				
			},
			rulesInfo:{
				type:Object,
				default: () => {
				    return {};
				}
				
			},
			isAddOrder:{
				type:Boolean,
				default: () => {
				    return false;
				}
				
			}
		},
		data() {
			return {
				list:[],
				checkList:[],
			}
		},
		watch:{
			isAddOrder(val){
				if(val){
					this.onAddOrder();
				}else{
					this.initList();
				}
			},
			rulesInfo(val){
				this.initList();
			}
		},
		mounted() {
			this.initList();
		},
		methods: {
			initList(){
				this.list = [];
				this.config.shengxiao.map(item=>{
					this.list.push({title:item,isCheck:false,alias:'Zodiac'})
				})
				this.config.attr.map(item=>{
					this.list.push({title:item,isCheck:false,alias:'ShuXing'})
				})
				this.config.liangmian.map(item=>{
					this.list.push({title:item,isCheck:false,alias:'liangmian'})
				})
				this.config.wuxing.map(item=>{
					this.list.push({title:item,isCheck:false,alias:'WuXing'})
				})
				let tmp = [
					{'alias':'tou','title':'0头',isCheck:false},
					{'alias':'tou','title':'1头',isCheck:false},
					{'alias':'tou','title':'2头',isCheck:false},
					{'alias':'tou','title':'3头',isCheck:false},
					{'alias':'tou','title':'4头',isCheck:false},
					{'alias':'tou','title':'0尾',isCheck:false},
					{'alias':'tou','title':'1尾',isCheck:false},
					{'alias':'tou','title':'2尾',isCheck:false},
					{'alias':'tou','title':'3尾',isCheck:false},
					{'alias':'tou','title':'4尾',isCheck:false},
					{'alias':'tou','title':'5尾',isCheck:false},
					{'alias':'tou','title':'6尾',isCheck:false},
					{'alias':'tou','title':'7尾',isCheck:false},
					{'alias':'tou','title':'8尾',isCheck:false},
					{'alias':'tou','title':'9尾',isCheck:false},
				];
				tmp.map(item=>{
					this.list.push(item)
				})
				this.checkList =[];
			},
			checkGrid(item){
				item.isCheck = !item.isCheck;
				if(item.isCheck) {
					let nub = branchAnalysis(item.title,this.ball);
					this.checkList.push({
						'title' : item.title,
						'list'  : nub
					});
				}else{
					for(var i in this.checkList) {
						if(this.checkList[i].title == item.title) {
							this.checkList.splice(i,1);
							break;
						}
					}
				}
			},
			onAddOrder(){
				if(this.checkList.length) {
					this.checkList.map(item=>{
						let betting_code = JSON.parse(JSON.stringify(item.list));
						let  obj = {
							betting_code:betting_code,
							alias:this.rulesInfo.alias,
							betting_rate:this.rulesInfo.rate,
							betting_max_rate:this.rulesInfo.max_rate,
							pid:this.rulesInfo.pid,
							typeid:this.rulesInfo.typeid,
							title:this.rulesInfo.title,
							pid_name:this.rulesInfo.pid_name,
							multiple:1,
							amount:betting_code.length,
							money:'1.00',
							total_money:'1.00',
						}
						
						this.$emit('click',true,obj);
					})
					
					
					this.initList();
				}else{
					this.$emit('click',false,{message:'请选择号码'});
				}
			}
		}
	}
</script>

<style lang="less">

</style>
